.loading-wave-dots{
  @size: 8px;
  @wave: -6px;
  @near-wave: -4px;
  @after-wave: 2px;
  @c-wave: #999;
  @c-near-wave: #bbb;
  position: relative;
  &:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -@size/2;
    margin-top: -@size/2;
    width: @size;
    height: @size;
    background-color: @c-near-wave;
    border-radius: 50%;
    animation: linear loading-wave-dots 2.8s infinite;
  }
  @keyframes loading-wave-dots{
    0%{
      box-shadow: -@size * 4 0 0 @c-near-wave,
                  -@size * 2 0 0 @c-near-wave,
                  @size * 2 0 0 @c-near-wave,
                  @size * 4 0 0 @c-near-wave;
    }
    5%{
      box-shadow: -@size * 4 @near-wave 0 @c-near-wave,
                  -@size * 2 0 0 @c-near-wave,
                  @size * 2 0 0 @c-near-wave,
                  @size * 4 0 0 @c-near-wave;
      transform: translateY(0);
    }
    10%{
      box-shadow: -@size * 4 @wave 0 @c-wave,
                  -@size * 2 @near-wave 0 @c-near-wave,
                  @size * 2 0 0 @c-near-wave,
                  @size * 4 0 0 @c-near-wave;
      transform: translateY(0);
    }
    15%{
      box-shadow: -@size * 4 @after-wave 0 @c-near-wave,
                  -@size * 2 @wave - @near-wave 0 @c-wave,
                  @size * 2 -@near-wave 0 @c-near-wave,
                  @size * 4 -@near-wave 0 @c-near-wave;
      transform: translateY(@near-wave);
      background-color: @c-near-wave;
    }
    20%{
      box-shadow: -@size * 4 -@wave 0 @c-near-wave,
                  -@size * 2 @near-wave - @wave + @after-wave 0 @c-near-wave,
                  @size * 2 @near-wave - @wave 0 @c-near-wave,
                  @size * 4 -@wave 0 @c-near-wave;
      transform: translateY(@wave);
      background-color: @c-wave;
    }
    25%{
      @offset: @near-wave + @after-wave;
      box-shadow: -@size * 4 -@offset 0 @c-near-wave,
                  -@size * 2 -@offset 0 @c-near-wave,
                  @size * 2 @wave - @offset 0 @c-wave,
                  @size * 4 @near-wave - @offset 0 @c-near-wave;
      transform: translateY(@offset);
      background-color: @c-near-wave;
    }
    30%{
      box-shadow: -@size * 4 0 0 @c-near-wave,
                  -@size * 2 0 0 @c-near-wave,
                  @size * 2 @near-wave + @after-wave 0 @c-near-wave,
                  @size * 4 @wave 0 @c-wave;
      transform: translateY(0);
    }
    35%{
      box-shadow: -@size * 4 0 0 @c-near-wave,
                  -@size * 2 0 0 @c-near-wave,
                  @size * 2 0 0 @c-near-wave,
                  @size * 4 @near-wave + @after-wave 0 @c-near-wave;
    }
    40%{
      box-shadow: -@size * 4 0 0 @c-near-wave,
                  -@size * 2 0 0 @c-near-wave,
                  @size * 2 0 0 @c-near-wave,
                  @size * 4 0 0 @c-near-wave;
    }
    100%{
      box-shadow: -@size * 4 0 0 @c-near-wave,
                  -@size * 2 0 0 @c-near-wave,
                  @size * 2 0 0 @c-near-wave,
                  @size * 4 0 0 @c-near-wave;
    }
  }
}
